<template>
  <div class="wrapper">
    <banner-com :bannerList="bannerList" :bannerImg="bannerImg"></banner-com>
    <Row :gutter="35">
      <Col span="16">
      <div class="table-card">
        <div class="title">{{ $t('personal.PromoterLevel') }}</div>
        <div class="table">
          <div class="table-head">
            <Row>
              <Col span="8">
              <div class="head-text">{{ $t('promote.level_tit') }}</div>
              <div class="left-text">1 {{ $t('promote.type_level_commission') }}</div>
              <div class="left-text">2 {{ $t('promote.type_level_commission') }}</div>
              </Col>
              <Col span="4" v-for="(item, index) in vipData" :key="index">
              <div :class="index === (userInfo.promoteLevel - 1) ? 'sep-text' : 'head-title'">V{{ item.level }}</div>
              <div :class="index === (userInfo.promoteLevel - 1) ? 'sep-area' : 'content-text'">{{
                item.promoteLevel1CommissionRate }}%</div>
              <div :class="index === (userInfo.promoteLevel - 1) ? 'sep-area' : 'content-text'">{{
                item.promoteLevel2CommissionRate }}%</div>
              </Col>
            </Row>
          </div>
        </div>
      </div>
      </Col>
      <Col span="8">
      <div class="user-info">
        <div class="title">{{ $t('promote.my_level') }}</div>
        <div class="current-vip">
          <div class="label">{{ $t('promote.current_level') }}</div>
          <div class="num">V{{ userInfo.promoteLevel || 0 }}</div>
        </div>
        <div class="current-vip">
          <div class="label">{{ $t('personal.CommissionRate') }}</div>
          <div class="num">{{ userInfo.level1ExpressCommissionRate || 0 }}%+{{ userInfo.level2ExpressCommissionRate || 0
            }}%</div>
        </div>
        <div class="progress-bar-container">
          <div class="progress-bar" :style="{ width: calculatedProgress + '%' }"></div>
        </div>
        <div class="integral-label">{{ $t('personal.Credit') }}</div>
        <div class="integral-num">{{ userInfo.promoteScore }}/{{ userInfo.targetPromoteLevelScore }}</div>
      </div>
      </Col>
    </Row>

    <Row :gutter="42">
      <Col span="8">
      <div class="card-area">
        <div class="title">{{ $t('promote.open_commission') }}</div>
        <div class="time-head">
          <div class="left">7{{ $t('user.sky') }}</div>
          <div class="right">
            <span class="currency">{{ userCurrency }}</span>
            <span class="big-text">{{ infoData.last7DaysUnSettleCommission || 0 }}</span>
          </div>
        </div>
        <div class="legend-sty">
          <div class="green-legend">
            <div class="rect"></div> {{ $t('promote.level_type1') }}
          </div>
          <div class="yel-legend">
            <div class="rect"></div> {{ $t('promote.level_type2') }}
          </div>
        </div>
        <comp-bar class="comp-sty" :categoryData="categoryData" :firstSevDayData="firstSevDayData"
          :SecondSevDayData="SecondSevDayData"></comp-bar>
      </div>
      </Col>
      <Col span="8">
      <div class="card-area">
        <div class="title">{{ $t('personal.ShippingFees') }}</div>
        <div class="sub-title sub-head">
          {{ $t('promote.gray_sub_tit_card') }}
          <span class="date-text">
            {{ infoData.latestIncomeTimeStr ? infoData.latestIncomeTimeStr : '' }}
          </span>
        </div>
        <div class="com-num">
          {{ infoData.latestIncomeAmount }}
          <span>{{ userCurrency }}</span>
        </div>
        <div class="sub-title sub-head" style="margin-top: 32px;">
          {{ $t('promote.gray_third_tit_card') }}
        </div>
        <div class="com-num">
          {{ infoData.totalIncomeCount }}
        </div>
      </div>
      </Col>
      <Col span="8">
      <div class="card-area">
        <div class="title">{{ $t('promote.accumulated_freight_commission') }}</div>
        <div class="sub-title">
          {{ $t('promote.fre_card_title') }}</div>
        <div class="com-num">
          {{ infoData.cumulativeIncome }}
          <!--          <span>{{ userCurrency }}</span>-->
          <span>CNY</span>
        </div>
        <div class="sub-title sub-head" :style="{ marginTop: $t('interval.height') }">
          {{ $t('promote.current_month') }}
          <span class="date-text">
            {{ $t('promote.com_with_before_month') }}
            <span style="text-wrap: nowrap;">
              <Icon :type="iconType" class="trend-icon" :color="iconColor" />
              <span :style="{ color: iconColor }">{{ infoData.percentageChangeForMonth }}%</span>
            </span>
          </span>
        </div>
        <div class="com-num">
          {{ infoData.last30DaysIncome || 0 }}
          <!--<span>{{ userCurrency }}</span>-->
          <span>CNY</span>
        </div>
      </div>
      </Col>
    </Row>
    <brokerage-com :flowData="flowData"></brokerage-com>
    <commission-detail :columns="columns" :data="tableData" :tableTit="tableTit" :selData="selData"
      @changeTab="changeTab" :allPage="allPage" :currentPage="currentPage" @updateMet="updateMet"></commission-detail>
  </div>
</template>
<script>
import { mapState } from "vuex";
import dayjs from "dayjs";
import 'dayjs/locale/en'; // 引入dayjs的英文语言包
import { getCommissionStatInfo, listCommissionConfig, getPageCommissionDetail } from "@/api/invite";
import bannerCom from './components/banner-Com.vue';
import BrokerageCom from './components/brokerage-Com.vue';
import CommissionDetail from './components/commission-detail.vue';
import CompBar from './components/comp-bar.vue';

export default {
  components: { bannerCom, BrokerageCom, CommissionDetail, CompBar },
  data() {
    return {
      bannerList: [
        { title: this.$t('promote.freight_banner_tit1'), text: this.$t('promote.freight_banner_text1') },
        { title: this.$t('promote.freight_banner_tit2'), text: this.$t('promote.freight_banner_text2') },
        { title: this.$t('promote.freight_banner_tit3'), text: this.$t('promote.freight_banner_text3') },
      ],
      bannerImg: require('@/assets/images/promote/fre_icon.png'),
      vipData: [],
      progress: 100,//当前等级值
      maxValue: 1000,//当前等级最大值
      flowData: [
        {
          id: 1,
          imgUrl: require('@/assets/images/promote/fre_flow1.png'),
          subTitle: this.$t('promote.status_for_the_account'),
          desc: this.$t('promote.status_for_the_account_desc')
        },
        {
          id: 2,
          imgUrl: require('@/assets/images/promote/fre_flow2.png'),
          subTitle: this.$t('promote.status_funds_recorded'),
          desc: this.$t('promote.card_desc_content')
        },
        {
          id: 3,
          imgUrl: require('@/assets/images/promote/fre_flow3.png'),
          subTitle: this.$t('user.canceled_text'),
          desc: this.$t('promote.card_desc_content1')
        }
      ],
      infoData: {},
      tableData: [],
      tableTit: this.$t('promote.fre_comm_detail_tit'),
      selData: [
        { name: this.$t('user.all'), isActive: true },
        { name: this.$t('promote.status_for_the_account'), isActive: false },
        { name: this.$t('promote.status_funds_recorded'), isActive: false },
        { name: this.$t('user.canceled_text'), isActive: false }],
      columns: [
        {
          title: this.$t('user.tradingTime'),
          key: 'tradeTime',
          width: 240,
          fixed: 'left',
          align: 'center'
        },
        {
          title: this.$t('user.status'),
          key: 'status',
          width: 240,
          align: 'center',
          render: (h, params) => {
            let statusText = '';
            let statusColor = '';
            switch (params.row.status) {
              case 0:
                statusText = this.$t('promote.status_for_the_account');
                statusColor = '#FF9727';
                break;
              case 1:
                statusText = this.$t('promote.status_funds_recorded');
                statusColor = '#35DAA9';
                break;
              case 2:
                statusText = this.$t('user.canceled_text');
                statusColor = '#FF5D5D';
                break;
              default:
                statusText = '';
                statusColor = 'black';
            }
            return h('span', {
              style: {
                color: statusColor
              }
            }, statusText);
          }
        },
        {
          title: this.$t('user.settlementDate'),
          key: 'settleDate',
          width: 240,
          align: 'center'
        },
        {
          title: this.$t('user.commissionAmount'),
          key: 'commissionAmount',
          width: 240,
          align: 'center',
          render: (h, params) => {
            return h('div', {
              style: {
                color: '#FF186B'
              }
            }, `CNY ${params.row.commissionAmount}`);
          }
        },
        {
          title: this.$t('promote.subcommission_type'),
          key: 'promoteLevel',
          width: 240,
          align: 'center', render: (h, params) => {
            let levelText = '';
            switch (params.row.promoteLevel) {
              case 1:
                levelText = this.$t('promote.level_cn_type1');
                break;
              case 2:
                levelText = this.$t('promote.level_cn_type2');
                break;
              default:
                levelText = '';
            }
            return h('span', levelText);
          }
        },
        {
          title: this.$t('user.waybillCreationDate'),
          key: 'expressCreateTime',
          width: 240,
          align: 'center'
        },
        {
          title: this.$t('user.waybillCompletionDate'),
          key: 'expressCompleteTime',
          width: 240,
          align: 'center'
        },
        {
          title: this.$t('wayBill.parcel_No'),
          key: 'orderNo',
          width: 240,
          align: 'center'
        },
        // 包裹金额不要了
        // {
        //   title: this.$t('user.waybillAmount'),
        //   key: 'orderAmount',
        //   width: 240,
        //   align: 'center',
        //   render: (h, params) => {
        //     return h('div', `CNY ${params.row.orderAmount}`);
        //   }
        // }
      ],
      form: {
        commissionType: 'INVITE_USER',
        pageNo: 1,
        pageSize: 7
      },
      categoryData: [],
      firstSevDayData: [],
      SecondSevDayData: [],
      allPage: 0,//总页数
      currentPage: 1,//当前页
    }
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      userCurrency: (state) => {
        return state.user.userCurrency.code;
      }
    }),
    calculatedProgress() {
      return (this.userInfo.promoteScore / this.userInfo.targetPromoteLevelScore) * 100;
    },
    iconType() {
      return this.infoData.percentageChangeForMonth < 0 ? 'md-trending-down' : 'md-trending-up';
    },
    iconColor() {
      return this.infoData.percentageChangeForMonth < 0 ? '#FF4D50' : '#49BC19'
    }
  },
  created() {
    this.getData();
    this.getSet();
    this.getTable();
  },
  methods: {
    setProgress(newProgress) {
      this.progress = newProgress;
    },
    getSet() {
      listCommissionConfig().then(res => {
        this.vipData = res.result;
      })
    },
    getData() {
      getCommissionStatInfo({ commissionType: 'INVITE_USER' }).then(res => {
        this.infoData = res.result;
        if (this.infoData.last7DaysUnSettleList !== null) {
          this.infoData.last7DaysUnSettleList.forEach((item) => {
            let date = new Date(item.dateTime * 1000);
            let weekDay = date.getDay();
            let weekDayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
            let shortWeekDay = weekDayNames[weekDay].substring(0, 2);
            this.categoryData.push(shortWeekDay);
            // 根据item.firstLevelCommission的值显示不同一级柱体颜色
            let color = item.firstLevelCommission > 0 ? '#2DDDA8' : '#EBEFF4';
            let newFirstItem = {
              value: item.firstLevelCommission,
              itemStyle: {
                color: color
              }
            };
            this.firstSevDayData.push(newFirstItem);//一级

            // 根据item.secondLevelCommission的值显示不同二级柱体颜色
            let SecondColor = item.secondLevelCommission > 0 ? '#FFD014' : '#EBEFF4';
            let newSecondItem = {
              value: item.secondLevelCommission,
              itemStyle: {
                color: SecondColor
              }
            };
            this.SecondSevDayData.push(newSecondItem);//二级
          });
        } else {
          // 没值的情况
          dayjs.locale('en'); // 设置dayjs为英文环境
          const today = dayjs();
          for (let i = 0; i < 7; i++) {
            const day = today.subtract(i, 'day');
            const weekDay = day.format('ddd').substring(0, 2);
            this.categoryData.push(weekDay);
          }
          // 反转数组，使得顺序是从前往后（过去到现在）
          this.categoryData.reverse();
          let dataArr = [0, 0, 0, 0, 0, 0, 0];
          dataArr.forEach((item) => {
            let newItem = {
              value: item,
              itemStyle: {
                color: '#EBEFF4'
              }
            };
            this.firstSevDayData.push(newItem);//一级
            this.SecondSevDayData.push(newItem);//二级
          })
        }
      })
    },
    getTable() {
      getPageCommissionDetail(this.form).then(res => {
        this.tableData = res.result.records;
        this.allPage = res.result.pages;
        this.currentPage = res.result.current;
        this.allAmount = res.result.total;
      })
    },
    // tab切换
    changeTab(name) {
      this.currentPage = 1;//重置当前页
      this.form.pageNo = 1;//重置查询页
      this.selData.forEach((item) => {
        if (item.name == name) {
          item.isActive = true
        } else {
          item.isActive = false
        }
      });

      if (name == this.$t('promote.status_for_the_account')) {
        this.form.status = 0;
      } else if (name == this.$t('promote.status_funds_recorded')) {
        this.form.status = 1;
      } else if (name == this.$t('user.canceled_text')) {
        this.form.status = 2;
      } else {
        delete this.form.status;
      }
      this.getTable();
    },
    // 分页
    updateMet(val) {
      this.form.pageNo = val;
      this.getTable();
    }
  }
}
</script>
<style lang="less" scoped>
.wrapper {
  font-family: Open Sans, Open Sans;

  .table-card {
    min-height: 386px;
    max-height: 386px;
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #E8E8E8;
    margin-top: 32px;
    padding: 32px 40px;

    .title {
      font-weight: 600;
      font-size: 22px;
      color: #1E1714;
      line-height: 26px;
      margin-bottom: 24px;
    }

    .table {
      min-height: 268px;
      max-height: 268px;
      border-radius: 12px;
      border: 1px solid #EBEFF4;

      &-head {
        min-height: 82px;
        max-height: 82px;
        font-family: Open Sans, Open Sans;
        font-weight: 600;
        font-size: 22px;
        color: #1E1714;
        line-height: 26px;
        border-bottom: 1px solid #EBEFF4;
        background: #F7F9FC;
        text-align: center;

        .head-title {
          line-height: 82px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .content-text {
          height: 93px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .head-text {
          height: 82px;
          font-family: DIN Alternate, DIN Alternate;
          font-weight: bold;
          font-size: 16px;
          color: #1E1714;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .sep-text {
          background: #2DDDA8;
          line-height: 82px;
        }

        .left-text {
          height: 93px;
          font-family: DIN Alternate, DIN Alternate;
          font-weight: bold;
          font-size: 16px;
          color: #1E1714;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .sep-area {
          background: #E9F8F4;
          line-height: 93px;
        }
      }
    }
  }

  .user-info {
    min-height: 386px;
    max-height: 386px;
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #E8E8E8;
    margin-top: 32px;
    padding: 32px 40px;

    .title {
      font-weight: 600;
      font-size: 22px;
      color: #1E1714;
      line-height: 26px;
      margin-bottom: 58px;
    }

    .current-vip {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 27px;


      .label {
        font-weight: 400;
        font-size: 18px;
        color: #767B93;
        line-height: 21px;
      }

      .num {
        font-weight: bold;
        font-size: 22px;
        color: #1E1714;
        line-height: 26px;
      }
    }

    .progress-bar-container {
      width: 100%;
      height: 18px;
      background-color: #E9F8F4;
      margin-top: 16px;

      .progress-bar {
        height: 100%;
        background-color: #2DDDA8;
        text-align: center;
      }
    }

    .integral-label {
      font-weight: 400;
      font-size: 18px;
      color: #767B93;
      line-height: 21px;
      margin-top: 24px;
    }

    .integral-num {
      font-weight: 600;
      font-size: 18px;
      color: #1E1714;
      line-height: 21px;
      margin-top: 8px;
    }
  }

  .card-area {
    min-height: 386px;
    // max-height: 386px;
    background: #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    border: 1px solid #E8E8E8;
    padding: 32px 40px;
    margin-top: 32px;

    .title {
      font-weight: 600;
      font-size: 22px;
      color: #1E1714;
      line-height: 26px;
      margin-bottom: 36px;
    }

    .time-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: PingFang SC, PingFang SC;
      margin-top: 43px;

      .left {
        font-weight: 400;
        font-size: 20px;
        color: #767B93;
        line-height: 23px;
      }

      .right {
        color: #1E1714;

        .currency {
          font-weight: 600;
          font-size: 16px;
          line-height: 19px;
        }

        .big-text {
          font-family: Open Sans, Open Sans;
          font-weight: 600;
          font-size: 24px;
          color: #1E1714;
          line-height: 28px;
        }
      }
    }

    .legend-sty {
      text-align: right;
      margin-top: 20px;

      .green-legend {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 20px;
        color: #767B93;
        line-height: 23px;
        display: inline-flex;
        align-items: center;
        gap: 12px;

        .rect {
          width: 21px;
          height: 7px;
          background: #32CB9D;
          border-radius: 45px 45px 45px 45px;
        }
      }

      .yel-legend {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 20px;
        color: #767B93;
        line-height: 23px;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        margin-left: 21px;

        .rect {
          width: 21px;
          height: 7px;
          background: #FFD014;
          border-radius: 45px 45px 45px 45px;
        }
      }
    }

    .comp-sty {
      width: 100%;
      height: 160px;
    }

    .sub-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 20px;
      color: #767B93;
      line-height: 23px;
      margin-bottom: 5px;

      .tip-icon {
        cursor: pointer;
      }
    }

    .sub-head {
      width: 100%;
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
    }

    .com-num {
      font-family: Open Sans, Open Sans;
      font-weight: bold;
      font-size: 48px;
      color: #32CB9D;
      line-height: 56px;
      text-wrap: nowrap;
      margin-top: 9px;

      span {
        font-size: 23px;
        line-height: 27px;
      }
    }
  }
}
</style>
